<template>
  <view class="viewport">
    <view class="navbar" ref="navbarRef">
      <fui-nav-bar isOccupy isFixed background="#0052D9" title="盘点任务" color="#fff" @leftClick="leftClick" @rightClick="rightClick">
        <fui-icon color="#fff" name="arrowleft"></fui-icon>
        <template v-slot:right>
          <fui-icon color="#fff" name="plus"></fui-icon>
        </template>
      </fui-nav-bar>

      <view class="warp">
        <view class="head">
          <view class="ipt">
            <u--input placeholder="请输入" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
          </view>
          <view class="screen" @click="screen">
            <image class="img" src="/static/images/index/shaixuan.svg" mode=""></image>
            筛选
          </view>
        </view>

        <view class="tab">
          <view class="tabBox">
            <view
              :class="tabCheckName == 'unpacked' ? 'tabItemChoose' : 'tabItem'"
              data-type="unpacked"
              style="border-bottom-left-radius: 10rpx; border-top-left-radius: 10rpx"
              @click="tabChange"
            >
              未盘(8)
            </view>
            <view :class="tabCheckName == 'discharged' ? 'tabItemChoose' : 'tabItem'" data-type="discharged" @click="tabChange" style="border-left: none; border-right: none">
              已盘(2)
            </view>
            <view
              :class="tabCheckName == 'inventorySurplus' ? 'tabItemChoose' : 'tabItem'"
              data-type="inventorySurplus"
              @click="tabChange"
              style="border-bottom-right-radius: 10rpx; border-top-right-radius: 10rpx"
            >
              盘盈(0)
            </view>
          </view>
        </view>
      </view>
    </view>

    <scroll-view
      class="List"
      :refresher-triggered="refreshing"
      refresher-enabled="true"
      scroll-y="true"
      scroll-x="false"
      lower-threshold="20"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh"
      :style="{ height: ListHeight + 'px' }"
    >
      <view class="ListItem" v-for="i in 6">
        <view class="left">
          <image src="../../static/logo.png" class="icon" mode=""></image>
        </view>
        <view class="right">
          <view class="title">设备一</view>
          <view class="text">SB68230492</view>
          <view class="text">四厂区二楼三车间</view>
        </view>
      </view>
    </scroll-view>

    <view class="bottom">
      <view class="bottomItemLeft">添加盘盈</view>
      <view class="bottomItemRight" @click="finish">结束盘盈</view>
    </view>
  </view>

  <!-- 结束盘盈-弹窗确认后-弹窗 -->
  <view>
    <u-modal :show="show" @confirm="show = false" @cancel="show = false" :showCancelButton="true">
      <view class="modal">
        <view class="modalTitle">结束盘点</view>

        <view class="modalDetail">
          <view class="modalDetailItem">
            <view class="itemNum">8</view>
            <view class="">未盘</view>
          </view>
          <view class="modalDetailItem">
            <view class="itemNum">8</view>
            <view class="">已盘</view>
          </view>
          <view class="modalDetailItem">
            <view class="itemNum">8</view>
            <view class="">盘盈</view>
          </view>
        </view>
        <textarea v-model="memo" placeholder="请输入内容" class="textarea"></textarea>
      </view>
    </u-modal>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from 'vue';

const show = ref(false);
const memo = ref('');
const navbarHeight = ref(0);
const screenHeight = ref(0);
const ListHeight = ref(0);
const bottomHeight = ref(0);
onMounted(() => {
  // 计算  class=List 的元素的高度
  const { proxy } = getCurrentInstance();

  const query = uni.createSelectorQuery().in(proxy);
  query
    .select('.bottom')
    .boundingClientRect((rect) => {
      bottomHeight.value = rect.height;
    })
    .exec();
  query
    .select('.navbar')
    .boundingClientRect((rect) => {
      navbarHeight.value = rect.height;

      const systemInfo = uni.getSystemInfoSync();
      screenHeight.value = systemInfo.screenHeight;

      ListHeight.value = screenHeight.value - navbarHeight.value - bottomHeight.value;
    })
    .exec();
});

const tabCheckName = ref('unpacked');
const tabChange = (e) => {
  tabCheckName.value = e.target.dataset.type;
};
const leftClick = () => {
  uni.navigateBack();
};
const rightClick = () => {};
const screen = () => {};
// 结束盘盈
const finish = () => {
  uni.showModal({
    title: '',
    content: '有未盘点的设备，确认结束盘点？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
        show.value = true;
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
};

// 触底后新增数据
const onScrollToLower = () => {
  uni.toast('到底了');
  console.log('触底了');
};
// 刷新
const onRefresh = () => {
  uni.toast('更新数据');
};
</script>

<style lang="scss" scoped>
.warp {
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  z-index: 999;
  // padding-bottom: 150rpx;
  width: 100%;

  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 20rpx;

    .ipt {
      flex: 1;
      margin-left: 25rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .screen {
      // width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }

  .tab {
    width: 100%;
    padding: 0 20rpx 20rpx;
    display: flex;
    background-color: #fff;
    align-items: center;
    justify-content: center;

    .tabBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20rpx;

      .tabItem {
        color: #0052d9;
        width: 33%;
        text-align: center;
        border: 2rpx solid #0052d9;
        padding: 10rpx;
      }

      .tabItemChoose {
        color: #fff;
        width: 33%;
        text-align: center;
        border: 2rpx solid #0052d9;
        background-color: #0052d9;
        padding: 10rpx;
      }
    }
  }
}

.List {
  // position: absolute;
  background-color: #f6f6f6;
  width: 100%;

  .ListItem {
    background-color: #fff;
    display: flex;
    padding: 20rpx;
    width: 100%;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        width: 150rpx;
        height: 150rpx;
      }
    }

    .right {
      margin-left: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 150rpx;

      .title {
        font-size: 35rpx;
      }

      .text {
        color: #abb0b9;
      }
    }
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  height: 150rpx;
  width: 100%;
  background-color: #fff;
  border-top: 2rpx solid #aaa;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .bottomItemLeft {
    border: 2rpx solid #0052d9;
    border-radius: 10rpx;
    background-color: #0052d9;
    color: #fff;
    padding: 20rpx 80rpx;
  }

  .bottomItemRight {
    border: 2rpx solid #0052d9;
    border-radius: 10rpx;
    background-color: #fff;
    color: #0052d9;
    padding: 20rpx 80rpx;
  }
}

.modal {
  width: 100%;

  .modalTitle {
    font-weight: bold;
    text-align: center;
    margin-bottom: 80rpx;
  }

  .modalDetail {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .modalDetailItem {
      width: 33%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .itemNum {
        margin-bottom: 30rpx;
        color: #0052d9;
        font-weight: bold;
        font-size: 30rpx;
      }
    }
  }

  .textarea {
    border: 2rpx solid #eee;
    padding: 20rpx;
    border-radius: 10rpx;
  }
}
</style>
